<!--复盘改进-->
<template>
  <div class="bigTable">
    <!-- <div @click="clickAcitive" class="tools">
      <div
        :class="
          isActive.trim() == '复盘案例' ? 'tools-item-active' : 'tools-item'
        "
      >
        <div>复盘案例</div>
      </div>
      <div
        :class="
          isActive.trim() == '优秀案例' ? 'tools-item-active' : 'tools-item'
        "
      >
        <div>优秀案例</div>
      </div>
      <div
        :class="
          isActive.trim() == '经验教训' ? 'tools-item-active' : 'tools-item'
        "
      >
        <div>经验教训</div>
      </div>
    </div> -->
    <div>
      <el-input v-model="searchData" class="search-input"> </el-input>
      <el-button
        icon="el-icon-search"
        style="background-color: #002868; color: white;margin-left:5px"
        >搜索</el-button
      >
    </div>
    <div style="padding: 0px 10px; width: calc(100%); height: 10%">
      <div class="tab-header">
        <div class="tab-item">名称</div>
        <div class="tab-item">种类</div>
        <div class="tab-item">未使用数量</div>
        <div class="tab-item">操作</div>
      </div>
    </div>
    <div
      style="
        padding: 0px 10px;
        width: calc(100% - 20px);
        height: calc(80% - 40px);
      "
    >
      <div v-for="(item, i) in tableList" class="tab-item-content">
        <div class="tab-item-content-item">{{ item.unit }}</div>
        <div class="tab-item-content-item">{{ item.event }}</div>
        <div class="tab-item-content-item">{{ item.suggest }}</div>
        <div
          style="color: lightblue"
          class="tab-item-content-item"
          @click="viewDetails(item, i)"
        >
          {{ item.operation }}
        </div>
      </div>
    </div>

    <div class="ReviewImproveDetails" v-if="centerDialogVisible">
      <div class="BulletFrame">
        <div class="titleCancel">
          <div class="datil">详情</div>
          <span class="cancel" @click="cancel">x</span>
        </div>
        <div class="centerLine"></div>
        <div class="ImproveDetails">
          <div class="details">
            <span>型号：</span>
            <span>SONY Alpha 1</span>
          </div>
          <div class="details">
            <span>分类：</span>
            <span>单反相机</span>
          </div>
          <div class="details">
            <span>总数：</span>
            <span>4</span>
          </div>
          <div class="details">
            <span>使用数量：</span>
            <span>2</span>
          </div>
          <div class="details">
            <span>未使用数量：</span>
            <span>2</span>
          </div>
          <div class="enclosure">
            <div>在货架情况：</div>
            <div>
              <span>货架1-1</span>
            </div>
            <div>
              <span></span>
            </div>
          </div>
          <div class="enclosure">
            <div>使用情况：</div>

            <div>
              <span>2024-12-30</span>
            </div>
            <div>
              <span>张三使用</span>
            </div>
          </div>
        </div>
        <div class="confirmCancel">
          <button @click="confirm">详情</button>
          <button @click="cancel">返回</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: "",
      isActive: "复盘案例",
      tableList: [
        {
          unit: "SONY Alpha 1",
          event: "单反相机",
          suggest: "2",
          operation: "查看详情",
        },
        {
          unit: "Nikon D850",
          event: "单反相机",
          suggest: "2",
          operation: "查看详情",
        },
        {
          unit: "Canon EOS 5D Mark IV",
          event: "单反相机",
          suggest: "2",
          operation: "查看详情",
        },
        {
          unit: "Sony Alpha A7R IV",
          event: "单反相机",
          suggest: "3",
          operation: "查看详情",
        },
        {
          unit: "Fujifilm X-T4",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
        {
          unit: "Pentax K-1 Mark II",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
        {
          unit: "Olympus OM-D E-M1 Mark III",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
        {
          unit: "Panasonic Lumix S1R",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
        {
          unit: "Leica SL2",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
        {
          unit: "Hasselblad X1D II 50C",
          event: "单反相机",
          suggest: "4",
          operation: "查看详情",
        },
      ],
      centerDialogVisible: false,
    };
  },
  methods: {
    clickAcitive(e) {
      this.isActive = e.target.textContent;
    },
    viewDetails(item, i) {
      console.log(item, i);
      this.centerDialogVisible = true;
    },
    confirm() {
      this.centerDialogVisible = false;
    },
    cancel() {
      this.centerDialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .search-input .el-input__inner {
  background-color: #002868 !important;
  color: white !important;
}

.bigTable {
  width: 100%;
  height: 100%;
  .search-input {
    width: 200px;
    height: 40px;

    margin-left: 10px;
  }
  .tools {
    height: 10%;
    width: calc(100% - 20px);
    padding: 10px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tools-item {
      color: white;
      height: 100%;
      flex-grow: 1;
      margin-left: 5px;
      background-image: url("../../assets/img/decision/tools.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tools-item-active {
      height: 100%;
      flex-grow: 1;
      margin-left: 5px;
      background-image: url("../../assets/img/decision/tools-active.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .tab-header {
    width: calc(100% - 20px);
    height: 100%;
    background-image: url("../../assets/img/correct/tab-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;

    .tab-item {
      width: 25%;
      color: white;
      text-align: center;
    }
  }
  .tab-item-content {
    width: 100%;
    height: 20%;
    // height: calc((80% - 20px) / 5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    .tab-item-content-item {
      width: 25%;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.ReviewImproveDetails {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2001;
  background-color: rgba(0, 0, 0, 0.5);
  .BulletFrame {
    width: 420px;
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    padding: 20px;
    background: linear-gradient(151deg, #144fa3 0%, #083d8b 45%, #0a3472 100%);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid;
    border-image: linear-gradient(
        307deg,
        rgba(200, 200, 200, 0),
        rgba(87, 169, 226, 0.7),
        rgba(151, 151, 151, 0)
      )
      1 1;
    .titleCancel {
      width: 100%;
      text-align: center;
      padding-bottom: 20px;
      .datil {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .cancel {
        position: absolute;
        top: 5px;
        right: 10px;
        font-size: 23px;
        color: #fff;
        cursor: pointer;
      }
    }
    .centerLine {
      width: 100%;
      height: 2px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid;
      border-image: linear-gradient(
          270deg,
          rgba(151, 151, 151, 0.1),
          rgba(255, 255, 255, 1),
          rgba(151, 151, 151, 0.1)
        )
        1 1;
    }
    .ImproveDetails {
      width: 100%;
      padding-top: 20px;
      .details {
        width: 100%;
        height: 42px;
        line-height: 42px;
        display: flex;
        justify-content: space-between;
        color: #fff;
        padding: 0 10px;
        margin: 10px 0;
        box-sizing: border-box;
        background: linear-gradient(
          90deg,
          rgba(0, 133, 255, 0.8) 0%,
          rgba(57, 129, 214, 0) 100%
        );
        border: 1px solid;
        border-image: linear-gradient(
            90deg,
            rgba(62, 146, 244, 1),
            rgba(45, 134, 237, 0)
          )
          1 1;
      }
      .enclosure {
        width: 100%;
        color: #fff;
        padding: 10px;
        margin: 10px 0;
        box-sizing: border-box;
        background: linear-gradient(
          90deg,
          rgba(0, 133, 255, 0.8) 0%,
          rgba(57, 129, 214, 0) 100%
        );
        border: 1px solid;
        border-image: linear-gradient(
            90deg,
            rgba(62, 146, 244, 1),
            rgba(45, 134, 237, 0)
          )
          1 1;
        div {
          padding: 10px 0;
        }
      }
    }

    .confirmCancel {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 10px 0;
      button {
        width: 63px;
        height: 22px;
        color: #fff;
        margin: 0 5px;
        background: url("../../assets/img/replay/details1.png") 100% 100%;
        border: 0;
        outline: none;
      }
    }
  }
}
</style>
